
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v = "urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>	 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
    <title>map</title>
    <script type="text/javascript" src="http://api.map.baidu.com/getscript? 
    v=2.0&ak=d1bIPqQmDYwgGwZX5x03WQzmugBZO0KT"></script>
    <style>
      body{
        margin: 0;
        padding: 0;
      }
      .map{
        height: 100%;
      }
      .marker {
        position: absolute;
        height: 40px;
        transform: translate(-50%, -100%);
      }
      .sign {
        display: block;
        width: 30px;
        height: 40px;
        line-height: 30px;
        text-align: center;
        font-size: 15px;
        color: #fff;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
        background-image: url('./img/marker_red2.png') !important;
        cursor: pointer;
      }
      .BMap_Marker img {
        display: none !important;
      }
      .anchorBL {
        display: none;
      }
    </style>
    <script type="text/javascript">
      function ComplexCustomOverlay(point, html) {
        this._point = point
        this._html = html
      }
      ComplexCustomOverlay.prototype = new BMap.Overlay()
      ComplexCustomOverlay.prototype.initialize = function(map) {
        this._map = map
        var div = (this._div = document.createElement('div'))
        div.setAttribute('class', 'marker')
        div.innerHTML = this._html

        this._map.getPanes().labelPane.appendChild(div)
        return div
      }
      ComplexCustomOverlay.prototype.draw = function() {
        var map = this._map
        var pixel = map.pointToOverlayPixel(this._point)
        this._div.style.left = pixel.x + 'px'
        this._div.style.top = pixel.y + 'px'
      }

      var _MapApp;
      function onLoad(){
        //禁用百度地图景点弹窗 enableMapClick: false
        _MapApp = new window.BMap.Map(document.getElementById("mymap"), { enableMapClick: false });
        _MapApp.centerAndZoom(new window.BMap.Point(110.35077, 20.035595), 14) // 初始化地图,设置中心点坐标和地图级别
        _MapApp.addControl(
          new window.BMap.MapTypeControl({
            // 添加地图类型控件
            mapTypes: [window.BMAP_NORMAL_MAP, window.BMAP_HYBRID_MAP]
          })
        )
        _MapApp.setCurrentCity('海口') // 设置地图显示的城市 此项是必须设置的
        _MapApp.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
        // this.testData()
        // this.getPositionList("海口市公安局")
      }
      function testData() {
        let data1 = [
          {
            key: 0,
            longitude: '110.34088',
            latitude: '20.035595',
          },
          {
            key: 1,
            longitude: '110.35066',
            latitude: '20.039592',
          },
        ]
        let str= JSON.stringify(data1)
        setTimeout(() => {
          this.drawMapMarker(str)
        }, 1000)
      }
      // 根本数据输出标准轨迹
      function drawMapMarker(str) {
        let data=JSON.parse(str)
        // alert("数组:"+data)
        // alert("key:"+data[0].key)
        // this.isLoading = false // 隐藏查询提示
        const colors = ['red', 'blue', 'green', 'violet', 'deongaree', 'orange']
        // this.getRepeatPointer(data)
        _MapApp.clearOverlays()
        // data.forEach((item, index) => {
          this.drawOverlay(data, colors[0])
        // })
        this.panTo(data, 0)
      }
      function drawOverlay(data, type) {
        // this.addLine(data, type)
        this.addMarker(data)
      }
      function addMarker(data) {
        let that = this
        data.forEach((item, index) => {
          const point = new BMap.Point(item.longitude, item.latitude)
          let html = `<span class="sign">` + (index + 1) + `</span>`
          let marker = new BMap.Marker(point)
          const myCompOverlay = new ComplexCustomOverlay(point, html)
          _MapApp.addOverlay(marker)
          _MapApp.addOverlay(myCompOverlay)
          //设置标注点在覆盖物上面,设置marker层级
          _MapApp.getPanes().markerPane.style.zIndex = 500

        })
      }
      function addLine(data, type) {
        const colors = {
          red: '#d91f1b',
          blue: '#009dd9',
          // blue: "#2F98F4",
          green: '#48bb00',
          violet: '#762bd0',
          deongaree: '#1921b3',
          orange: 'orange'
        }
        let line = []
        data.forEach((item, index) => {
          line.push(new BMap.Point(item.longitude, item.latitude))
        })
        console.log('line')
        console.log(line)
        var polyline = new BMap.Polyline(line, {
          strokeColor: colors[type],
          strokeWeight: 2.5,
          strokeOpacity: 0.8
        }) // 创建折线
        _MapApp.addOverlay(polyline) // 增加折线
      }
      function panTo(data, key) {
        const target = data.filter(item => key === item.key)[0]
        target && _MapApp.panTo(new BMap.Point(target.longitude, target.latitude))
      }
      //输入模糊搜索信息
      function getPositionList(str) {
        let that = this
        var options = {
          onSearchComplete: function(results) {
            // 判断状态是否正确
            if (local.getStatus() == BMAP_STATUS_SUCCESS) {
              var arr = []
              for (var i = 0; i < results.getCurrentNumPois(); i++) {
                // console.log(results.getPoi(i))
                let obj = {
                  key: i,
                  title: results.getPoi(i).title,
                  address: results.getPoi(i).address,
                  longitude: results.getPoi(i).point.lng,
                  latitude: results.getPoi(i).point.lat
                }
                arr.push(obj)
              }
              // console.log('arr')
              // console.log(arr)
              // that.$emit('pisitionList', s)
              // let arr = [{list: s}]
              let str= JSON.stringify(arr)
              // /调用android方法，js页面的值传给android
              // alert("数组:"+str)
				      that.android.getPositionValue(str);
              // setTimeout(() => {
              //   this.drawMapMarker(str)
              // }, 1000)
            }else{
              that.android.getPositionValue(""); //没查询到数据返回空字符串
            }
          }
        }
        var local = new window.BMap.LocalSearch(_MapApp, options)
        local.search(str)
      }
    </script>
  </head> 
  <body onload="onLoad()">
    <div id="mymap" class="map"></div>
  </body>
</html>

